<template>
	<diyBase>
		<template #left="{}">
			<div class="service-page flex">
				<div class="qr-code">
					<img class="w-[100%] h-[100%]" v-if="serviceData.qr_code" :src="getUrl(serviceData.qr_code)" alt="" />
				</div>
				<div class="title">{{ serviceData.title }}</div>
				<div class="info">
					<div class="item">服务时间：{{ serviceData.date_time }}</div>
					<div class="item">客服电话：{{ serviceData.mobile }}</div>
					<div class="item">联系QQ：{{ serviceData.qq }}</div>
				</div>
				<div class="mt-2 text-center w-full">
					<el-button class="w-[60%]" type="primary">保存二维码</el-button>
				</div>
			</div>
		</template>
		<template #right="{}">
			<diyService ref="diyServiceRef" @getData="getData" />
		</template>
		<template #footer="{}">
			<el-button v-auth="'diy/setServicePageData'" type="primary" @click="handleSubmit">保存</el-button>
		</template>
	</diyBase>
</template>
<script lang="ts" setup name="decorationService">
import { reactive, ref } from 'vue';
import { diySetServicePage } from '/@/api/diy';
import { messageSuccess } from '/@/utils/message';
import { getUrl } from '/@/utils/util';
import diyBase from '/@/views/decoration/mobile/component/diyBase.vue';
import diyService from '/@/views/decoration/mobile/component/diyService.vue';

const diyServiceRef = ref();

const serviceData = reactive({
	title: '',
	date_time: '',
	mobile: '',
	qq: '',
	qr_code: '',
});

const getData = (data: any) => {
	for (const key in serviceData) {
		if (data[key] != null && data[key] != undefined) {
			serviceData[key] = data[key];
		}
	}
};

// 保存提交
const handleSubmit = async () => {
	await diySetServicePage({ type: 1, data: serviceData });
	diyServiceRef.value.getData();
	messageSuccess('设置成功');
};
</script>
<style lang="scss" scoped>
.diy-box {
	.page-preview .service-page {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 20px;
		padding: 60px 0;
		border-radius: 6px;
		background-color: #ffffff;

		.qr-code {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 140px;
			height: 140px;
			background-color: #f8f8f8;
		}
		.title {
			margin-top: 10px;
			font-size: 15px;
			font-weight: 500;
		}
		.info {
			margin-top: 10px;
			color: #666;
			.item {
				margin: 4px 0;
			}
		}
	}
}
</style>
